<!DOCTYPE html>

<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理员管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

		.el-header {
			background-color: #B3C0D1;
			color: #333;
			line-height: 60px;
		}

		.el-aside {
			color: #333;
		}

		.el-menu {
			border: none;
			border-right-width: 0;
		}

		.el-button {
			border: none;
		}

		.buttonColor {
			background-color: rgb(32, 155, 159);
		}

		.buttonColor:hover {
			background-color: rgba(32, 155, 159, 0.773)
		}

		.buttonColor:focus {
			background-color: rgba(32, 155, 159, 0.773)
		}

		.buttonColor2:hover {
			color: rgba(32, 155, 159, 0.773)
		}

		.el-pager li:hover {
			color: rgba(32, 155, 159, 0.773)
		}

		.el-pager li.active {
			color: rgba(32, 155, 159, 0.773)
		}
    </style>
</head>

<body style="background-color: #545c64;">
    <div id="app">
        <el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
            <div style="font-size: 20px; color:rgb(32, 155, 159)">
                <div style="float: left;">
                    <span>图书管理平台</span></div>
				<div style="float: right; font-size: 15px;">
					<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
				<div style="width: 100px; float: right; font-size: 15px;">
					<a href="admin.html" style="color: rgb(32, 155, 159);">{{ adminName }}</a>
				</div>
            </div>
        </el-header>
        <el-container style="height: auto;">
            <el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
                <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
					<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-s-data"></i>数据统计</el-menu-item>
					<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-user-solid"></i>管理员管理</el-menu-item>
					<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-user"></i>用户管理</el-menu-item>
					<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-collection"></i>图书管理</el-menu-item>
					<el-menu-item index="5" class="el-menu-item" @click="load5()" style="border-right: none;"><i class="el-icon-tickets"></i>借阅管理</el-menu-item>
					<el-menu-item index="6" class="el-menu-item" @click="load6()" style="border-right: none;"><i class="el-icon-tickets"></i>公告管理</el-menu-item>
                </el-menu>
            </el-aside>

            <!-- <el-container> -->
            <el-main>
                <div class="content-header">
                    <h1>管理员管理</h1>
                </div>
                <div class="app-container">
                    <div class="box">
                        <div class="filter-container">
                            <el-input placeholder="管理员编号" v-model="adminId" style="width: 200px;" class="filter-item"></el-input>
                            <el-button type="primary" @click="getAdmin()" class="buttonColor butT">查询管理员</el-button>
                            <el-button type="primary" @click="getAll()" class="buttonColor butT">查询所有</el-button>
                            <el-button type="primary" class="buttonColor butT" @click="handleCreate()">新增管理员</el-button>
                        </div>
                        <el-table size="small" border current-row-key="id" :data="currentPageData" stripe highlight-current-row>
                            <el-table-column type="index" align="center" label="序号"></el-table-column>
                            <el-table-column prop="id" label="管理员编号" align="center"></el-table-column>
                            <el-table-column prop="username" label="管理员账号" align="center"></el-table-column>
                            <el-table-column prop="password" label="管理员密码" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
										<el-button type="primary" size="mini" class="buttonColor" @click="handleUpdate(scope.row)">编辑</el-button>
										<el-button type="danger" size="mini" class="border:none" @click="handleDelete(scope.row)">删除</el-button>
									</template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页工具条 -->
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                        <!-- 新增标签弹层 -->
                        <div class="add-form">
                            <el-dialog title="新增管理员" :visible.sync="dialogFormVisible">
                                <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="管理员账号" prop="username">
                                                <el-input v-model="formData.username" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="管理员密码" prop="password">
                                                <el-input v-model="formData.password" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button class="buttonColor2" @click="dialogFormVisible = false">取消</el-button>
                                    <el-button type="primary" class="buttonColor" @click="handleAdd()">确定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                        <!-- 编辑标签弹层 -->
                        <div class="add-form">
                            <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
                                <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="管理员账号" prop="username">
                                                <el-input v-model="formData.username" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="管理员密码" prop="password">
                                                <el-input v-model="formData.password" />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button class="buttonColor2" @click="dialogFormVisible4Edit = false">取消</el-button>
                                    <el-button type="primary" class="buttonColor" @click="handleEdit()">确定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </el-main>
            <!-- </el-container> -->
        </el-container>
    </div>

</body>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: {},
            adminId: '', //输入管理员编号
			adminName: '',
            dataList: [], //当前页要展示的列表数据
            formData: {}, //表单数据
            dialogFormVisible: false, //控制表单是否可见
            dialogFormVisible4Edit: false, //编辑表单是否可见
            rules: { //校验规则
                username: [{
                    required: true,
                    message: '管理员账号为必填项',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '管理员密码为必填项',
                    trigger: 'blur'
                }],
            },
            totalPage: 1, // 统共页数，默认为1
            currentPage: 1, //当前页数 ，默认为1
            pageSize: 10, // 每页显示数量
            pageSizes: [10, 20, 40], // 页码划分
            currentPageData: [], //当前页显示内容
            headPage: 1,
            total: 40,
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
			this.adminName = localStorage.getItem("adminName");
			if (localStorage.getItem("adminName") == null){
				alert('请先登录!!!');
				window.location.href = "../index.html";
			}
			this.getAll();
        },

        methods: {
			// 退出登录
			logout() {
				localStorage.removeItem("adminName");
				localStorage.removeItem("password");
				window.location.href = "../index.html";
			},
			// 网页跳转
			load1(){
				window.location.href="statistics.html";
			},
			load2(){
				window.location.href="admin.html";
			},
			load3(){
				window.location.href="users.html";
			},
			load4(){
				window.location.href="books.html";
			},
			load5(){
				window.location.href="lentRecord.html";
			},
			load6(){
				window.location.href="notice.html";
			},
            // 分页工具
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getCurrentPageData();
            },
            handleCurrentChange(val) {
                console.log(`当前页第 ${val} 页`);
                console.log(`总共 ${this.totalPage} 页`);
                console.log(`总共 ${this.total} 条数据`)
                this.currentPage = val;
                this.getCurrentPageData();
            },
            getCurrentPageData() {
                let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.dataList.slice(
                    begin,
                    end
                );
            },

            //查询单个管理员
            getAdmin() {
                axios.get("/admin/" + this.adminId).then((res) => {
                    if (res.data.code == 20041) {
                        this.dataList = [];
                        this.dataList.push(res.data.data);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                    console.log(res.data);
                    console.log(this.dataList);
					this.getCurrentPageData();
                })
            },

            //列表
            getAll() {
                //发送ajax请求
                axios.get("/admin").then((res) => {
                    this.dataList = res.data.data;
                    this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
                    this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
                    this.total = this.dataList.length;
                    this.getCurrentPageData();

                });
            },

            //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                this.resetForm();
            },

            //重置表单
            resetForm() {
                this.formData = {};
            },

            //添加
            handleAdd() {
                //发送ajax请求
                axios.post("/admin", this.formData).then((res) => {
                    console.log(res.data);
                    //如果操作成功，关闭弹层，显示数据
                    if (res.data.code == 20011) {
                        this.dialogFormVisible = false;
                        this.$message.success("添加成功");
                    } else if (res.data.code == 20010) {
                        this.$message.error("添加失败");
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                    this.getAll();
                });
            },

            //弹出编辑窗口
            handleUpdate(row) {
                // console.log(row);   //row.id 查询条件
                //查询数据，根据id查询
                axios.get("/admin/" + row.id).then((res) => {
                    // console.log(res.data.data);
                    if (res.data.code == 20041) {
                        //展示弹层，加载数据
                        this.formData = res.data.data;
                        this.dialogFormVisible4Edit = true;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },

            //编辑
            handleEdit() {
                //发送ajax请求
                axios.put("/admin", this.formData).then((res) => {
                    //如果操作成功，关闭弹层，显示数据
                    if (res.data.code == 20031) {
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    } else if (res.data.code == 20030) {
                        this.$message.error("修改失败");
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                    this.getAll();
                });
            },

            // 删除
            handleDelete(row) {
                //1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    //2.做删除业务
                    axios.delete("/admin/" + row.id).then((res) => {
                        if (res.data.code == 20021) {
                            this.$message.success("删除成功");
                        } else {
                            this.$message.error("删除失败");
                        }
                    }).finally(() => {
                        this.getAll();
                    });
                }).catch(() => {
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            }
        }
    })
</script>

</html>